<template>
	<view class="page flex flex-col">
		<navbar :leftText="'报警列表'" :backStatus="true"></navbar>
		<view class="w690 flex-1" style="overflow-y: hidden;">
			<view>
				<up-tabs :list="list1" @click="click" lineWidth="60" :lineColor="`url(${lineBg}) 100% 100%`"
					lineColor="#38FDFF" :activeStyle="{
            color: '#FFFFFF',
            fontWeight: 'bold'
        }" :inactiveStyle="{
            color: '#FFFFFF ',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 20px; padding-right: 20px; height: 30px;"></up-tabs>
			</view>
			<!-- 设备列表 -->
			<view class="flex flex-col" style="height:90%">
				<scroll-view class="heightFull device_H" scroll-y="true" @scroll="scroll">
					<view class="deviceItem" @click="goDeviceDetail" v-for="(item,index) in 6">
						<view class="deviceMember">
							<view class="flex-between">
								<view class="flex-start">
									<view>
										<image style="width:74rpx;height:74rpx;margin-right:14rpx;"
											src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/yujing-icon@2x.png"
											mode="aspectFill"></image>
									</view>
									<view>
										<view>团队员名称…</view>
										<view class="teamPhone">联系电话：
											<text>17837164192</text>
										</view>
									</view>
								</view>
								<view class="alarmInfo">
									报警状态信息
								</view>
							</view>
							<view>
								<view>
									<text class="deviceNumItem">安装地址：</text>
									<text class="text-22">西安市高新区西安市高新区西安市高新区西安</text>
								</view>
							</view>
						</view>


						<view class="flex-between deviceNum">
							<view class="flex-start">
								<view class="deviceNumItem">安装人员:</view>
								<view>1452</view>
							</view>
							<view class="flex-start">
								<view class="deviceNumItem">归属团队长:</view>
								<view>1452</view>
							</view>
							<view class="flex-start">
								<view class="deviceNumItem">天数:</view>
								<view>1523</view>
							</view>
						</view>
					</view>
				</scroll-view>


			</view>

			<!-- <view class="heightFull flex-column-center">
				<noData :imgUrl="'http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/kong.gif'" :width="370"
					:height="262" :content="'暂无报警'">
				</noData>
			</view> -->

		</view>



	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	let imageUrl = ref("");
	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');
		imageUrl.value = globalData.value.imgOssUrl;
	})

	// 分类背景图片
	const lineBg = ref("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/baiqianxian%402x.png")

	// 全部分类
	const classifyAll = reactive([{
			name: "全部",
			value: 0
		},
		{
			name: "路由器",
			value: 1
		}, {
			name: "大节点",
			value: 2
		}, {
			name: "盒子",
			value: 3
		}
	])
	// 收益分类
	const list1 = reactive([{
			name: '大节点'
		},
		{
			name: '盒子'
		},
		{
			name: '路由器'
		}
	]);

	// 去设备详情
	let goDeviceDetail = () => {
		uni.navigateTo({
			url: "/pagesA/device/deviceChild/deviceDetail"
		})
	}
</script>

<style scoped>
	.alarmInfo {
		font-size: 28rpx;
		color: #F02947;
		font-weight: 600;
	}

	.classifyMain {
		color: #fff;
	}

	.deviceItem {
		/* height: 288rpx; */
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/yujingxinxi-bg%402x.png") no-repeat;
		background-size: 100% 100%;
		margin-bottom: 16rpx;
		padding: 30rpx;
		box-sizing: border-box;
		color: #fff;
		font-size: 28rpx;
	}

	.teamPhone {
		font-size: 22rpx;
		color: #5A669E;
		margin-top: 4rpx;
	}

	.teamPhone>text {
		color: #fff;
	}

	.deviceMember {
		padding-bottom: 18rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #1F1757;
	}

	.deviceNum {
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.deviceNumItem {
		font-size: 22rpx;
		color: #5A669E;
		margin-right: 12rpx;
	}

	.device_H {
		margin-top: 36rpx;
	}
</style>